<!DOCTYPE html>
<html lang="en">
	<head>
	
    <title>CBE BPE Toolkit - Building Scorecard</title>

    <link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/static/anytime/css/anytimec.css"/>
    <link rel="stylesheet" type="text/css" href="/static/pmp/css/plot.css"/>
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }
    </style>
    <script type="text/javascript" src="/static/jquery-1.7.2/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/flot-0.7/js/date.js"></script>
    <script type="text/javascript" src="/static/sessvars/sessvars.js"></script>
    <script type="text/javascript" src="/static/pmp/js/scorecard.js"></script>
    <script type="text/javascript" src="/static/pmp/js/pmputil.js"></script>
    <script type="text/javascript" src="/static/jquery-blockUI/jquery.blockUI.js"></script>
    <script type="text/javascript" src="/static/highcharts/js/highcharts.js"></script>
  </head>

  <body>
	{% include 'header.html' %}
        <div class="span10" id="mainContent">
        	<h3>Scorecard</h3>
        	<form id='ieqModelForm' class="form-inline">
				<label class="control-label">IEQ Model: &nbsp;</label>
				{{ ieq_model.management_form }}
				{{ ieq_model.name }}
			</form>
			<div class="row">
			<div class="span9">
			<table class="table" style="margin-bottom: 0px">
				<thead>
					<th id="bi_name" style="font-size: 14px"></th>
					<th>&nbsp;</th>
					<th>&nbsp;</th>
					<th>Survey Benchmark<br>(percentile)</th>
					<th>Survey<br>(% satisfied)</th>
					<th>Measured<br>(IEQ model score)</th>
				</thead>
				<!--<tr>
					<td>Energy</td>
					<td>N/A</td>
					<td></td>
				</tr>
				<tr>
					<td>Water</td>
					<td>N/A</td>
					<td></td>
				</tr>-->
				<tr>
					<td rowspan="5">
						<table class="table table-condensed table-bordered" style="min-width: 260px">
			   				<tr>
			   					<td colspan="2" style="text-align: center">
			   						<div id='building_image'></div>
			   					</td>
			   				</tr>
							<tr>
								<td>City:</td>
								<td id="bi_city"></td>
							</tr>
							<tr>
								<td>Area:</td>
								<td id="bi_area"></td>
							</tr>
							<tr>
								<td>Building type:</td>
								<td id="bi_building_type"></td>
							</tr>
						</table>
					</td>
					<td style="vertical-align: middle"><img src="/static/pmp/img/tc_solid_50.png"></td>
					<td style="vertical-align: middle; padding-left: 0px"><b>Thermal Comfort</b></td>
					<td style="vertical-align: middle; font-size: 13px" id='tc_survey_bm'></td>
					<td style="vertical-align: middle; font-size: 13px" id='tc_survey'></td>
					<td style="vertical-align: middle; font-size: 13px" id='tc_measured'></td>
				</tr>
				<tr>
					<td style="vertical-align: middle"><img src="/static/pmp/img/lght_solid_50.png"></td>
					<td style="vertical-align: middle; padding-left: 0px"><b>Lighting</b></td>
					<td style="vertical-align: middle; font-size: 13px" id='lght_survey_bm'></td>
					<td style="vertical-align: middle; font-size: 13px" id='lght_survey'></td>
					<td style="vertical-align: middle; font-size: 13px" id='lght_measured'></td>
				</tr>
				<tr>
					<td style="vertical-align: middle"><img src="/static/pmp/img/iaq_solid_50.png"></td>
					<td style="vertical-align: middle; padding-left: 0px"><b>Indoor Air Quality</b></td>
					<td style="vertical-align: middle; font-size: 13px" id='iaq_survey_bm'></td>
					<td style="vertical-align: middle; font-size: 13px" id='iaq_survey'></td>
					<td style="vertical-align: middle; font-size: 13px" id='iaq_measured'></td>
				</tr>
				<tr>
					<td style="vertical-align: middle"><img src="/static/pmp/img/ac_solid_50.png"></td>
					<td style="vertical-align: middle; padding-left: 0px"><b>Acoustics</b></td>
					<td style="vertical-align: middle; font-size: 13px" id='acc_survey_bm'></td>
					<td style="vertical-align: middle; font-size: 13px" id='acc_survey'></td>
					<td style="vertical-align: middle; font-size: 13px" id='acc_measured'></td>
				</tr>
				<tr>
					&nbsp;
				</tr>
			</table>
   			</div> <!-- span8-->
   			</div> <!-- row-->
        	<div class="row">
		    	<div class="span9">
		    		
		    		<div id="chart" style="width:100%;height:350px;font: 12px sans-serif"></div><!--/chart div-->	
	         	</div><!--/span-->    
	            <div class="span3" id="legend"></div>
        	</div><!--/row--> 
        	<div id="indices" style="padding-bottom: 10px">
        		<h4>Environmental Quality Indices</h4> <!--dumb way of doing this--hard code in a number of eqi's-->
        		<div id="eqi"></div>
        		<p id="eqi_alert" style="font-size: 10px"></p>
        		<h5 id="bqi"></h5>
        		<p id="bqi_alert" style="font-size: 10px"></p>
        	</div>
        </div><!--/span-->
      </div><!--/row-->
      <hr>
		{% include 'footer.html' %}
    </div><!--/.fluid-container-->

</body>
<script>
	$(document).ready(function(){
		$("li#" + window.location.pathname.substring(5, window.location.pathname.length - 1)).addClass("active") 
	    $('select#id_name').change(function() { 
    		var projectId = $(this).val();
    		sessvars.sessionObj={'projectId': projectId}
    		ieqChart();
    	})
    	$('select#id_ieqModel_name').change(function() {
    		ieqChart();
    	})
	})
	if (typeof sessvars.sessionObj == 'undefined'){sessvars.sessionObj = {'projectId': $('select#id_name').find("option:selected").val()};}
	if (typeof sessvars.sessionObj != 'undefined'){
		if (sessvars.sessionObj['projectId'] == ""){sessvars.sessionObj['projectId'] = $('select#id_name').find("option:selected").val();}
		else {
			for (var i=0;i<document.getElementById('id_name').options.length;i++) {
				if (document.getElementById('id_name').options[i].value == sessvars.sessionObj['projectId'])
					{document.getElementById('id_name').options[i].selected = true;}
			}
		}
	}
	ieqChart(); 
</script>
</html>